<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box{
            width: 400px;
            height: 400px;
            background-color: green;
        }
        .inner{
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="inner"></div>
    </div>
    <button onclick="removeInnerEvent()">移除inner点击事件</button>
    <script>
        var boxEl = document.querySelector('.box');
        var innerBoxEl = document.querySelector('.box .inner');
        boxEl.onclick = function(){
            console.log('==》hello outBox!');
        }
        原生事件移除
        boxEl.onclick = null ;
        boxEl.onclick = function(){
            console.log('world!');
        }
        innerBoxEl.onclick = function(){
            console.log('hello innerBox!');
        }
        1. addEventListener可以在同一个元素上绑定同一个事件多次
        addEventListener 事件类型不能写on  
        2. addEventListener 第三个参数 是否捕获执行  可以控制事件的冒泡或捕获执行的方式
        3. onclick和addEventListener 能共存吗？
        4. 任意的事件都是两种写法 onkeydown  => keydow  。。。
        5. 移除事件
        5. 兼容性： 
        boxEl.addEventListener('click',function(){
            console.log('hello outBox!');
        },true)
        ie8 兼容写法 type必须带 on...
        target.attachEvent(type, listener)
        function ie8Evt(){
            console.log('ie8 ==> hello');
        }
        boxEl.attachEvent('onclick',ie8Evt);

        // boxEl.addEventListener('click',function(){
        //     console.log('world!');
        // })
        // function innerEvt(){
        //     console.log('hello innerBox!');
        // }
        // innerBoxEl.addEventListener('click',innerEvt,true);

        /**
        * 可以移除事件
        * 注意：1.  移除事件，必须是调用的同一个外部事件，不能是匿名函数
        *       2.  移除事件 冒泡、捕获类型必须一致
        **/
        // function removeInnerEvent(){
        //     innerBoxEl.removeEventListener('click',innerEvt,true);
        //     console.log('innerEvt 已经被移除！');
        // }
        
        /**
        * ie8 清楚
        **/
        function removeInnerEvent(){
            boxEl.detachEvent('onclick',ie8Evt);
        }

        // IE8 兼容写法?? 
        // 封装 addMyEvent()
    </script>
</body>
</html>